{extend name="main"}
{block name="style"}
<style>
    .basicContent {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 10px;
    }

    .basicContent>div {
        padding: 1em 0 1em 0;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr 4fr;
    }

    .basicContent>div>div.title {
        color: var(--secondary);
    }
</style>
{/block}
{block name="body"}
<div class="bg-white px-2">
    <el-tabs v-model="activeTab">
        <el-tab-pane label="客户概况" name="basic">
            <div class="py-4">
                <div class="px-3">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span style="font-weight: 600;">平台信息</span>
                            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                        </div>
                        <div class="basicContent">
                            <div>
                                <div class="title">企业名称：</div>
                                <div class="content">
                                    <span v-if="platformData.company_name != undefined">{{platformData.company_name}}</span>
                                    <span v-else class="dark">暂未绑定企业</span>
                                </div>
                            </div>
                            <div>
                                <div class="title">简历姓名：</div>
                                <div class="content">
                                    <span v-if="platformData.resume_name != undefined">{{platformData.resume_name}}</span>
                                    <span v-else class="dark">暂未创建简历</span>
                                </div>
                            </div>
                            <div>
                                <div class="title">绑定手机号：</div>
                                <div class="content">
                                    <span v-if="platformData.register_mobile != undefined">{{platformData.register_mobile}}</span>
                                    <span v-else class="dark">未注册</span>
                                </div>
                            </div>
                            <div>
                                <div class="title">简历完整度：</div>
                                <div class="content">
                                    <span v-if="platformData.resume_progress != undefined">{{platformData.resume_progress}}</span>
                                    <span v-else class="dark">暂未创建简历</span>
                                </div>
                            </div>
                            <div>
                                <div class="title">注册时间：</div>
                                <div class="content">
                                    <span v-if="platformData.register_time != undefined">{{platformData.register_time}}</span>
                                    <span v-else class="dark">未注册</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
                <div class="px-3 py-3">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span style="font-weight: 600;">已添加员工</span>
                        </div>
                        <el-table :data="employeesTableData">
                            <el-table-column prop="employee_name" label="员工名称">
                            </el-table-column>
                            <el-table-column prop="source" label="客户来源">
                            </el-table-column>
                            <el-table-column prop="follow_time" label="添加时间">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <div>
                                        <el-button type="primary" size="small" @click="goToEmployee(scope.row.employee_name)">详情</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
                <div class="px-3">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span style="font-weight: 600;">所在群聊</span>
                        </div>
                        <el-table :data="groupsTableData">
                            <el-table-column prop="group_name" label="群聊名称">
                            </el-table-column>
                            <el-table-column prop="group_master" label="群主">
                            </el-table-column>
                            <el-table-column prop="join_time" label="入群时间">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <div>
                                        <el-button type="primary" size="small" @click="goToGroups(scope.row.id)">详情</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
</div>
{/block}
{block name='script'}
<script type="text/javascript">
    /*{// 如果有从模板引擎传递的参数，请在这里接收，对字符串使用.replace(/[\r\n\s+]/g, '\\n') 过滤非法参数 } */
    const platformData = JSON.parse('{:json_encode($platform ?? [])}'.replace(/[\r\n\s+]/g, '\\n'))
    const employeesTableData = JSON.parse('{:json_encode($employees)}'.replace(/[\r\n\s+]/g, '\\n'))
    const groupsTableData = JSON.parse('{:json_encode($groups)}'.replace(/[\r\n\s+]/g, '\\n'))
</script>
<script type="text/javascript">
    const baseView = { view: XYBase.view, /*loading: false*/ }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                ...baseView,
                platformData,
                employeesTableData,
                groupsTableData,
                activeTab: 'basic',
            }
        },
        methods: {
            goToGroups(id) {
                window.open(`/talent/detail/${id}`)
            },
            goToEmployee(name) {
                window.open(`/work-wechat/employees?name=${name}`)
            },
            initHtml() {

            },
        },
        created() {
            this.initHtml()
            XYBase.created(this)
        },
        computed() {

        }
    })
</script>
{/block}